<template>
  <ZwSearchForm row-num="2" :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
  <ZwTable ref="tableRef" class="table-box" :option="tableOption" :rowKey="getRowKey" :fetch-params="state.searchParams" :fetch-api="fetchApi()"  @selection-change="handleSelectionChange" @select="autoSelect"></ZwTable>
</template>
<script setup lang="tsx">
  import { ref, reactive, nextTick, computed } from 'vue'
  import { store } from '@/store'
  import { ElTable } from 'element-plus'
  import { getGroupList, getSensitivelist } from '@/api/employe/riskmonitoring/sensitiveWord'
  import ZwSearchForm from '@/components/zw/search-form/SearchForm'
  import ZwTable from '@/components/zw/table/Table'
  import { deepCopy } from '@/utils/helper'

  const pro = defineProps(['selectid', 'chooseid', 'chooseitem'])
  const paramlist = reactive({
    allids: [],
    allitems: []
  })
  const delData = ref([]) //记录删除数据
  const tableRef:any = ref(null)
  let type = ref(20)
  const searchData = reactive({ keywords: '', status: '全部' })
  const paginationRef = ref(null)
  const multipleTableRef = ref<InstanceType<typeof ElTable>>()
  const multipleSelection = ref([])
  const addData = ref([]) //记录选中的新的敏感词
  const cancelData = ref([]) //记录取消选中的敏感词
  // 表格列表
  const tableData = ref([])
  // 分组 tree
  const groupData = ref([])

  const searchOption = computed(() => {
    return [
      {
        label: '敏感词',
        name: 'keywords',
        value: '',
        type: 'input',
        placeholder: '敏感词搜索'
      }
    ]
  })
  const tableOption = [
    {
      type: 'selection',
      width: 55,
      fixed: 'left',
      reserveSelection: true
    },
    {
      prop: 'words_name',
      label: '敏感词',
      width: 160
    },
    {
      prop: 'creater_name',
      label: '创建人',
      width: 130
    },
    {
      prop: 'created_at',
      label: '创建时间',
    }
  ]
  const getRowKey = (row: any) => {
    return row.id
  }
  const defaultParams = reactive({
    group_id: pro.selectid,
    keywords: ''
  })
  const state = reactive({
    searchParams: deepCopy({...defaultParams, group_id: pro.selectid})
  })
  const search = (data: any) => {
    tableRef.value.getTable().clearSelection()
    state.searchParams = { ...deepCopy(data), group_id: pro.selectid }
  }
  const reset = (v?: any) => {
    tableRef.value.getTable().clearSelection()
    state.searchParams = deepCopy({ ...v, group_id:  pro.selectid})
  }
  const fetchApi = () => {
    // 获取文件列表
    getTableH()
    return getSensitivelist
  }
  // 获取表格高度
  const getTableH = () => {
    nextTick(() => {
      tableRef.value.getTableH()
    })
  }
  // 分组列表
  const group_id = () => {
    return store.getters['content/group']
  }
  const addGroupingForm = reactive({
    group_id: '', //所属分组ID
    words_name: '', //敏感词
    status: 1
  })
  const props = {
    checkStrictly: true,
    emitPath: false,
    label: 'name',
    value: 'id'
  }
  // 获取分组列表详情
  const getGroup = () => {
    getGroupList({
      type: type.value
    }).then((res: any) => {
      let result: any[] = [
        {
          name: '全部分组',
          id: 'all',
          nums: 0,
          children: []
        }
      ]
      if (res.data.length > 0) {
        result[0].nums = res.total
        result[0].children = res.data
      }
      groupData.value = result as any
    })
  }
  getGroup()
  const handleSelectionChange = (val: any) => {
    paramlist.allids = []
    paramlist.allitems = val
    val.forEach((item) => {
      paramlist.allids.push(item.id)
    })
  }
  const autoSelect = (val: any, row: any) => {
    if (val.length == 0 || val.indexOf(row) == -1) {
      delData.value.push(row)
    }
  }
  defineExpose({
    search,
    paramlist,
    delData
  })
</script>

<style lang="scss" scoped>
.sen-table-list {
  flex: 1 0 auto;
  .el-form {
    display: flex;
    align-items: center;
    padding: 16px;
    margin-bottom: 16px;
    background-color: #f9f9f9;

    .btn-box {
      margin-left: 16px;
    }

    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
